import "./index.less"
import { Button, FilledInput } from '@mui/material'
import React, { useState } from 'react'
import { QuestionTypeKey } from '@/utils/constant'
import { submitUserAnswerAip } from "@/api"
import { useLocation } from "react-router-dom"
import { useToast } from "@/hooks/toast"

interface IProp {
    data: IPracticeItem
}

export default function Fill({ data }: IProp) {
    const { state } = useLocation()
    const [value, setValue] = useState("")
    const [show, setShow] = useState(false)
    const toast = useToast()

    const submit = () => {
        // 数据检验 - 自己做
        setShow(true)
        submitUserAnswerAip({
            categoryCode: data.categoryCode,
            actionCode: state.actionCode,
            userAnswer: value,
            actionType: "exam_test",
            id: data.id
        }).then(res => {
            if (res.errCode === 0) {
                toast('提交成功')
            }
        })
    }
    return (
        <div className="fill">
            <div className="top-title">
                <div className="type">{QuestionTypeKey[data.questionType]}</div>
                <div className="title">{data.title}</div>
            </div>
            <div className="code" dangerouslySetInnerHTML={{ __html: data.content }}></div>
            <div className="user-anwser">
                <FilledInput multiline={true} fullWidth rows={5} disableUnderline={true} placeholder="请输入答案" value={value} onChange={(e) => setValue(e.target.value)} />
            </div>
            <div className="sys-answer">
                <Button variant="outlined" onClick={submit}>确定</Button>
                <div style={{ display: show ? 'block' : 'none' }}>{data.answer}</div>
            </div>
        </div>
    )
}
